<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }
        
        .moe {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: #181818;
            color: #FFF;
            padding: 0;
            margin: 0;
            cursor: auto;
            font-size: 18px;
            list-style-type: none;
            z-index: 999999;
            box-shadow: 0 5px 5px -5px #333;
        }
        
        .moe:after {
            content: "";
            display: table;
            clear: both;
        }
        
        .moe svg {
            height: 45px;
            width: 65px;
            padding: 9px;
        }
        
        .moe svg path {
            fill: #fff;
        }
        
        .moe svg.icon-close {
            display: none;
            padding: 15px;
        }
        
        .moe li {
            width: 100%;
            height: 45px;
            line-height: 46px;
            text-align: center;
            float: left;
        }
        
        .moe li a {
            display: block;
            color: #333;
            width: 100%;
            height: 100%;
            text-decoration: none;
        }
        
        .moe .button {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            cursor: pointer;
            display: block;
        }
        
        .moe .button:after {
            opacity: 0;
            top: 45px;
            content: "";
            width: 100vw;
            display: block;
            position: fixed;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            content: "";
            z-index: 9;
            pointer-events: none;
            transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1);
            transition-delay: 0.1s;
        }
        
        .moe #toggle {
            display: none;
        }
        
        .moe #toggle.active~.button .icon-close,
        .moe #toggle:checked~.button .icon-close {
            display: block;
        }
        
        .moe #toggle.active~.button .icon-open,
        .moe #toggle:checked~.button .icon-open {
            display: none;
        }
        
        .moe #toggle.active~.button:after,
        .moe #toggle:checked~.button:after {
            opacity: 1;
            pointer-events: auto;
            transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
        }
        
        .moe #toggle.active~.bar,
        .moe #toggle:checked~.bar {
            transform: translateX(0);
            transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
        }
        
        .moe .iner {
            width: 65px;
            float: left;
            cursor: pointer;
            position: absolute;
        }
        
        .moe .iner .bar {
            box-shadow: 5px 0 5px -5px #333;
            display: block;
            width: 65vw;
            bottom: 0;
            background: white;
            color: #333;
            position: fixed;
            z-index: 9999999;
            transform: translateX(-405px);
            transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
            top: 45px;
            list-style-type: none;
            padding: 0;
            max-width: 400px;
        }
        
        .moe .iner .bar .arrow {
            position: absolute;
            line-height: 50px;
            font-size: 32px;
            color: #555;
            top: 3px;
            z-index: 0;
        }
        
        .moe .iner .bar .arrow.left {
            left: 25px;
        }
        
        .moe .iner .bar .arrow.right {
            right: 25px;
        }
        
        .moe .iner .bar li {
            height: 55px;
            line-height: 55px;
            font-size: 16px;
            text-align: left;
            position: relative;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            padding-left: 20px;
        }
        
        .moe .iner .bar li:hover {
            background: #eee;
        }
        
        .moe .iner .bar li .menu-sub {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 0;
            overflow: hidden;
            background: white;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);
            border-left: 1px solid #ccc;
            list-style-type: none;
            padding: 0;
            margin: 0;
            z-index: 2;
            max-width: 400px;
        }
        
        .moe .iner .bar li .menu-sub li {
            overflow: hidden;
        }
        
        .moe .iner .bar li .menu-sub .sub-title {
            padding-left: 50px;
        }
        
        .moe .iner .bar li .label {
            cursor: pointer;
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .moe .iner .bar li .su-tog {
            display: none;
        }
        
        .moe .iner .bar li .su-tog.active~.menu-sub,
        .moe .iner .bar li .su-tog:checked~.menu-sub {
            width: 65vw;
            visibility: visible;
            z-index: 1;
            transition: width 0.35s cubic-bezier(0, 0, 0.3, 1);
        }
    </style>
</head>

<body>
    <ul class="moe check">
        <li>电影内容</li>
        <li class="iner">
            <input id="toggle" type="checkbox">
            <label for="toggle" class="button">  
        <svg class="icon-open" viewBox="0 0 24 24">
            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
        </svg>
        <svg class="icon-close" viewBox="0 0 100 100">
          <path d="M83.288 88.13c-2.114 2.112-5.575 2.112-7.69 0L53.66 66.188c-2.113-2.112-5.572-2.112-7.686 0l-21.72 21.72c-2.114 2.113-5.572 2.113-7.687 0l-4.693-4.692c-2.114-2.114-2.114-5.573 0-7.688l21.72-21.72c2.112-2.115 2.112-5.574 0-7.687L11.87 24.4c-2.114-2.113-2.114-5.57 0-7.686l4.842-4.842c2.113-2.114 5.57-2.114 7.686 0l21.72 21.72c2.114 2.113 5.572 2.113 7.688 0l21.72-21.72c2.115-2.114 5.574-2.114 7.688 0l4.695 4.695c2.112 2.113 2.112 5.57-.002 7.686l-21.72 21.72c-2.112 2.114-2.112 5.573 0 7.686L88.13 75.6c2.112 2.11 2.112 5.572 0 7.687l-4.842 4.84z"></path>
        </svg> 
      </label>
            <ul class="bar">
                <li>
                    <a href="#">电影</a>
                </li>
                <li>
                    <a href="#">电视剧</a>
                </li>
                <li>
                    <a href="#">动漫</a>
                </li>
                <li>
                    <input type="checkbox" id="sub-one" class="su-tog">
                    <label class="label" for="sub-one">
                        美剧
                    </label>
                    <div class="arrow right">›</div>
                    <ul class="menu-sub">
                        <li class="sub-title">
                            <label class="label" for="sub-one">
                                返回
                            </label>
                            <div class="arrow left">‹</div>
                        </li>
                        <li>
                            <a href="#">生化危机</a>
                        </li>
                        <li>
                            <a href="#">速度与激情</a>
                        </li>
                        <li>
                            <a href="#">变形金刚</a>
                        </li>
                        <li>
                            <a href="#">惊变28周</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="checkbox" id="sub-two" class="su-tog">
                    <label class="label" for="sub-two">
                        日剧
                    </label>
                    <div class="arrow right">›</div>
                    <ul class="menu-sub">
                        <li class="sub-title">
                            <label class="label" for="sub-two">
                                返回
                            </label>
                            <div class="arrow left">‹</div>
                        </li>
                        <li>
                            <a href="#">非自然死亡</a>
                        </li>
                        <li>
                            <a href="#">世界奇妙物语</a>
                        </li>
                        <li>
                            <a href="#">法医物语</a>
                        </li>
                        <li>
                            <a href="#">刑事专业律师</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>

</html>